<template>
  <div id="Content">
    <div id="Catalog">

      <form @submit.prevent="toConfirm">
        <div>
          <div class="tab-header">
            <ul>
              <li data-id="PayerInfo">支付方信息</li>
              <li data-id="DeliveryInfo">配送信息</li>
            </ul>
          </div>
          <div class="tab-body">
            <div class="tab1" id="PayerInfo" >
              <table>
                <tr>
                  <th colspan=2><h2>支付金额:</h2></th>
                </tr>

                <tr>
                  <th colspan=2><h1>{{total}}</h1></th>
                </tr>

                <tr>
                  <th colspan=2><h2>支付方信息</h2></th>
                </tr>
                <tr>
                  <td>名:</td>
                  <td><input type="text" name="billToFirstName" v-model="new_order_form.billToFirstName"></td>
                </tr>
                <tr>
                  <td>姓:</td>
                  <td><input type="text" name="billToLastName" v-model="new_order_form.billToLastName"></td>
                </tr>
                <tr>
                  <td>详细地址:</td>
                  <td><input type="text" size="40" name="billAddress1" v-model="new_order_form.billAddress1"></td>
                </tr>
                <tr>
                  <td>城市:</td>
                  <td><input type="text" name="billCity" v-model="new_order_form.billCity"></td>
                </tr>
                <tr>
                  <td>省份:</td>
                  <td><input type="text" size="4" name="billState" v-model="new_order_form.billState" ></td>
                </tr>
                <tr>
                  <td>邮政编码:</td>
                  <td><input type="text" size="10" name="billZip" v-model="new_order_form.billZip"></td>
                </tr>
                <tr>
                  <td>国家:</td>
                  <td><input type="text" size="15" name="billCountry" v-model="new_order_form.billCountry"></td>
                </tr>
                <tr>
                  <td colspan=2>
                    <input type="checkbox" v-model="otherShip">
                    邮寄到其他地址...
                  </td>
                </tr>

              </table>
            </div>

            <div class="tab2" id="DeliveryInfo" v-if="otherShip">
              <table>
                <tr>
                  <th colspan=2><h2>配送信息</h2></th>
                </tr>

                <tr>
                  <td>名:</td>
                  <td><input type="text" name="shipToFirstName" v-model="ship_form.shipToFirstName"/></td>
                </tr>
                <tr>
                  <td>姓:</td>
                  <td><input type="text" name="shipToLastName" v-model="ship_form.shipToLastName"/></td>
                </tr>
                <tr>
                  <td>详细:</td>
                  <td><input type="text" size="40" name="shipAddress1" v-model="ship_form.shipAddress1"/></td>
                </tr>
                <tr>
                  <td>城市:</td>
                  <td><input type="text" name="shipCity" v-model="ship_form.shipCity" /></td>
                </tr>
                <tr>
                  <td>省份:</td>
                  <td><input type="text" size="4" name="shipState" v-model="ship_form.shipState"/></td>
                </tr>
                <tr>
                  <td>邮政编码:</td>
                  <td><input type="text" size="10" name="shipZip" v-model="ship_form.shipZip" /></td>
                </tr>
                <tr>
                  <td>国家:</td>
                  <td><input type="text" size="15" name="shipCountry" v-model="ship_form.shipCountry"/></td>
                </tr>

              </table>
            </div>
          </div>
        </div>
        <br>
        <br>
        <input type="submit" name="newOrder" value="Continue" @click="toConfirm()">
      </form>
    </div>

    <br>
    <br>
  </div>
</template>

<script>


import {reactive,ref,watch} from "vue";
import router from "@/router";
import api from "@/api";

export default {

    setup(){
      const total = sessionStorage.getItem('total');
      const otherShip = ref(false);

      const userNoJson = sessionStorage.getItem('user')
      const user = JSON.parse(userNoJson)
      let user_name = ''
      if(user){
        user_name = user.username

      }
      console.log(user)
      const new_order_form = reactive(
        {
          billToFirstName:  user.firstName,
          billToLastName:   user.lastName,
          billAddress1:     user.address1,
          billAddress2:     user.address2,
          billCity:         user.city,
          billState:        user.state,
          billZip:          user.zip,
          billCountry:      user.country,

        }
      );

      const ship_form = reactive({
        shipToFirstName: user.firstName,
        shipToLastName:  user.lastName,
        shipAddress1:    user.address1,
        shipAddress2:    '',
        shipCity:        user.city,
        shipState:       user.state,
        shipZip:         user.zip,
        shipCountry:     user.country
      }
      );

      //传给订单确认界面
      // const confirmForm =reactive({
      //
      //   billToFirstName:new_order_form.billToFirstName,
      //   billToLastName: new_order_form.billToLastName,
      //   billAddress1:   new_order_form.billAddress1,
      //   billAddress2:   new_order_form.billAddress2,
      //   billCity:       new_order_form.billCity,
      //   billState:      new_order_form.billState,
      //   billZip:        new_order_form.billZip,
      //   billCountry:    new_order_form.billCountry,
      //   shipToFirstName:ship_form.shipToFirstName,
      //   shipToLastName: ship_form.shipToLastName,
      //   shipAddress1:   ship_form.shipAddress1,
      //   shipCity:       ship_form.shipCity,
      //   shipState:      ship_form.shipState,
      //   shipZip:        ship_form.shipZip,
      //   shipCountry:    ship_form.shipCountry
      // })

      const orderNoJson = sessionStorage.getItem('order')
      const order = JSON.parse(orderNoJson)
      console.log(order)
      function toConfirm(){
        const OrderAddressForm = {
          order: order,
          shipVO:ship_form
        };

        api.confirmOrder(OrderAddressForm)
            .then((res =>{
              console.log(res.data.msg)
              sessionStorage.setItem('order',JSON.stringify(res.data.data))
              //console.log(res.data)


              //放返回orderid 用在后面支付用
              sessionStorage.setItem('order_id',res.data.data)


            }))
        console.log(ship_form)
        sessionStorage.setItem('confirmForm1',JSON.stringify(new_order_form) );
        sessionStorage.setItem('confirmForm2',JSON.stringify(ship_form) );

        router.push('/main/ConfirmOrder');


      }


      return{
        total,
        new_order_form,
        ship_form,
        toConfirm,
        otherShip

      };
    }


}
</script>

<style scoped>
table {
    text-align: center;
    border-collapse:collapse;
}

td {
    padding: 20px 38px;
}

tr:nth-child(2n-1) td {
    background-color: rgba(222, 222, 222, 0.53);
}

tr:nth-child(2n) td {
    background-color: rgba(222, 222, 222, 0.72);
}
</style>